import React, { Component } from 'react'
import { connect } from 'dva';
import { Tabs, Button } from 'antd';
import { checkInit } from '@/utils/util';
import styled from './styled.css';

import Entrance from './components/entrance';
import { DICT } from './enum';

const TabPane = Tabs.TabPane;

interface IProps {
  dispatch?: Function;
  outdoorItem: object;
  indoorItem: object;
  autoOutfireItem: object;
  gasOutfireItem: object;
  foamSystemItem: object;
  autoFireAlarmSystemItem: object;
  smokeExhaustSystemItem: object;
  smokeControlSystemItem: object;
  otherSystemItem: object;
}

@connect(({ archives_devices, loading, upload }) => ({
  outdoorItem: archives_devices.outdoors || {},
  indoorItem: archives_devices.indoors || {},
  autoOutfireItem: archives_devices.spray || {},
  gasOutfireItem: archives_devices.gas || {},
  foamSystemItem: archives_devices.foam || {},
  autoFireAlarmSystemItem: archives_devices.fireReport || {},
  smokeExhaustSystemItem: archives_devices.emitSmoke || {},
  smokeControlSystemItem: archives_devices.preventSmoke || {},
  otherSystemItem: archives_devices.otherSys || {},
  loading: loading.effects['archives_devices/queryDevices'],
  file: upload.fileValue || {},
  image: upload.imgValue || {},
}))
class index extends Component<IProps> {
  state = {
    outdoorsForm: false,
  }

  componentDidMount() {
    checkInit();
    const { dispatch } = this.props;
    dispatch({
      type: 'archives_devices/queryDict',
      payload: {
        keyList: DICT
      }
    });
    dispatch({ type: 'archives_devices/queryDevices' })
  }

  callback = (key) => {
    sessionStorage.setItem('def_key', key);
  };
  onChange = (key) => {
    
    sessionStorage.setItem('devices_key', key);
  };

  render() {
    const devicesKey = sessionStorage.getItem('devices_key') || '1';
    const { outdoorItem, indoorItem, autoOutfireItem, gasOutfireItem, foamSystemItem,
      autoFireAlarmSystemItem, smokeExhaustSystemItem, smokeControlSystemItem, otherSystemItem } = this.props;
    return (
      <>
        <Tabs onChange={this.callback} defaultActiveKey="1">
          <TabPane tab="建筑消防设施情况" key="1">
            <Tabs onChange={this.onChange} defaultActiveKey={devicesKey} className={styled.tabs}>
              <TabPane tab="室外消防给水" key="Outdoors">
                <Entrance data={outdoorItem} tabsKey="outdoorItem" />
              </TabPane>
              <TabPane tab="室内消火栓系统" key="Indoors">
                <Entrance data={indoorItem} tabsKey="indoorItem" />
              </TabPane>
              <TabPane tab="自动喷水灭火系统" key="Spray">
                <Entrance data={autoOutfireItem} tabsKey="autoOutfireItem" />
              </TabPane>
              <TabPane tab="气体灭火" key="Gas">
                <Entrance data={gasOutfireItem} tabsKey="gasOutfireItem" />
              </TabPane>
              <TabPane tab="泡沫系统" key="Foam">
                <Entrance data={foamSystemItem} tabsKey="foamSystemItem" />
              </TabPane>
              <TabPane tab="火灾自动报警系统" key="FireReport">
                <Entrance data={autoFireAlarmSystemItem} tabsKey="autoFireAlarmSystemItem" />
              </TabPane>
              <TabPane tab="排烟系统" key="EmitSmoke">
                <Entrance data={smokeExhaustSystemItem} tabsKey="smokeExhaustSystemItem" />
              </TabPane>
              <TabPane tab="防烟系统" key="PreventSmoke">
                <Entrance data={smokeControlSystemItem} tabsKey="smokeControlSystemItem" />
              </TabPane>
              <TabPane tab="其他系统" key="OtherSys">
                <Entrance data={otherSystemItem} tabsKey="otherSystemItem" />
              </TabPane>
            </Tabs>
          </TabPane>
          <TabPane tab="灭火器档案" key="2">

          </TabPane>
          <TabPane tab="消火栓档案" key="3">

          </TabPane>
        </Tabs>

      </>
    )
  }
}

export default index;
